"use client"

import { useState, useEffect } from 'react'
import  ThemeToggle from './ThemeToggle'
import { cn } from '@/lib/utils'
import { motion, AnimatePresence } from 'framer-motion'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

export function ScrollHeader() {
    const [isVisible, setIsVisible] = useState(true)
    const [lastScrollY, setLastScrollY] = useState(0)
    const router = useRouter()

    useEffect(() => {
        const handleScroll = () => {
            const currentScrollY = window.scrollY

            if (currentScrollY > 100 && currentScrollY > lastScrollY) {
                setIsVisible(false)
            } else if (currentScrollY < lastScrollY || currentScrollY <= 100) {
                setIsVisible(true)
            }

            setLastScrollY(currentScrollY)
        }

        window.addEventListener('scroll', handleScroll, { passive: true })
        return () => window.removeEventListener('scroll', handleScroll)
    }, [lastScrollY])

    return (
        <>
            {/* 占位元素 - 确保文档流空间 */}
            <div className="h-16 w-full" aria-hidden="true" />

            {/* 实际Header - 固定在视口顶部 */}
            <AnimatePresence>
                {isVisible && (
                    <motion.header
                        initial={{ y: 0 }}
                        animate={{ y: 0 }}
                        exit={{ y: -100 }}
                        transition={{ type: 'spring', damping: 20, stiffness: 300 }}
                        className={cn(
                            "fixed top-0 z-50 w-full border-b bg-background/95 backdrop-blur",
                            "supports-[backdrop-filter]:bg-background/60"
                        )}
                    >
                        <div className="container flex h-16 items-center justify-between px-4">
                            <div className="text-lg font-semibold">My App</div>

                            <div className="flex items-center gap-4">
                                <Button
                                    variant="ghost"
                                    onClick={() => router.push('/user/login')}
                                    className="hidden sm:inline-flex"
                                >
                                    用户登录
                                </Button>

                                <Button
                                    variant="ghost"
                                    onClick={() => router.push('/admin/login')}
                                    className="hidden sm:inline-flex"
                                >
                                    管理员登录
                                </Button>

                                <ThemeToggle />
                            </div>
                        </div>
                    </motion.header>
                )}
            </AnimatePresence>
        </>
    )
}
